<!DOCTYPE html>
<html>

<head>
    <title>礼盒卷材计算器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .container {
            margin: 15px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
        }

        .image-container {
            text-align: center;
            margin-bottom: 15px;
        }

        .image-container img {
            max-width: 100%;
            height: 400px;
            border-radius: 4px;
        }

        .input-group {
            margin: 12px 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        label {
            font-size: 16px;
            margin-bottom: 5px;
        }

        input {
            width: calc(100% - 22px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        button {
            margin-top: 18px;
            padding: 12px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 18px;
        }

        button:hover {
            background-color: #45a049;
        }

        #result {
            margin-top: 18px;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
        }

        /* 针对超小屏幕设备（如 iPhone SE）进一步优化 */
        @media (max-width: 320px) {
            .container {
                margin: 10px;
                padding: 10px;
            }

            label {
                font-size: 14px;
            }

            input {
                font-size: 14px;
            }

            button {
                font-size: 16px;
            }

            #result {
                font-size: 18px;
            }
        }

        /* 针对大屏幕手机优化 */
        @media (min-width: 768px) {
            .container {
                width: 60%;
            }

            .input-group {
                flex-direction: row;
                align-items: center;
            }

            label {
                width: 30%;
                margin-bottom: 0;
                margin-right: 10px;
            }

            input {
                width: 70%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image-container">
            <!-- 这里可以替换为你实际的图片路径 -->
            <img src="./example.jpg" alt="礼盒图片">
        </div>
        <h3>礼盒卷材计算</h3>
        <div class="input-group">
            <label>长度 (cm):</label>
            <input type="number" id="length" step="0.1" required>
        </div>
        <div class="input-group">
            <label>宽度 (cm):</label>
            <input type="number" id="width" step="0.1" required>
        </div>
        <div class="input-group">
            <label>高度 (cm):</label>
            <input type="number" id="height" step="0.1" required>
        </div>
        <button onclick="calculate()">计算</button>
        <div id="result"></div>
    </div>

    <script>
        function calculate() {
            // 获取输入值
            const lengthInput = document.getElementById('length');
            const widthInput = document.getElementById('width');
            const heightInput = document.getElementById('height');

            const l = parseFloat(lengthInput.value);
            const w = parseFloat(widthInput.value);
            const h = parseFloat(heightInput.value);

            // 检查是否有未输入的值
            if (isNaN(l) || isNaN(w) || isNaN(h)) {
                document.getElementById('result').innerHTML = '<span style="color:red">请输入有效的长度、宽度和高度值。</span>';
                return;
            }

            // 排序长宽高（从大到小）
            const sorted = [l, w, h].sort((a, b) => b - a);
            const longest = sorted[0];
            const middle = sorted[1];
            const shortest = sorted[2];

            // 计算关键参数
            const widthHeightSum = middle + shortest;    // 宽+高
            const lengthHeightSum = longest + shortest; // 长+高

            // 条件判断
            let rolls = 2; // 默认为2卷或以上
            if (widthHeightSum <= 43 && (lengthHeightSum * 2) <= 305) {
                rolls = 1;
            } else if (widthHeightSum > 43 && lengthHeightSum <= 86 && (widthHeightSum * 4) <= 305) {
                rolls = 1;
            }

            let resultText;
            if (rolls >= 2) {
                resultText = '2卷或以上';
            } else {
                resultText = `${rolls}卷`;
            }

            // 计算最终需要的最少长度（厘米）
            const minLengthInCm = (l + w + h) * 2 + 10;
            // 将厘米转换为米
            const minLengthInM = minLengthInCm / 100;

            // 显示结果
            document.getElementById('result').innerHTML = `需要 <span style="color:red">${resultText}</span> 材料<br>最少需要 <span style="color:red">${minLengthInM.toFixed(2)} 米 (${minLengthInCm.toFixed(1)} 厘米)</span> 长度的材料`;
        }
    </script>
</body>

</html>